﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>test</title>
    <link href="css/normalize.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/libs/animate.css">
    <style>
        #container {
            width: 100%;
        }
    </style>
</head>
<body>
    <script src="../YJScripts/jq/jquery-1.11.1.js"></script>
    <div id="container">
        <div>
            <img src="TanMaoG/6ZG[`T1$D6K8YVR`6EM9G)V.png" style="width: 100%;" />
        </div>
        <div id="main">
            <div class="wow fadeInDownBig" style="position: fixed; bottom: 0;width: 100%; text-align: center; background-color: #2b3c0b; opacity: 0.7; z-index: 99">
                <img src="http://img.hznzcn.com/TanMaoG/Bottom.png" style="display: inline-block; width: 50%; margin: 20px;" />
                <a style="position: absolute;top: 17px;display: inline-block;width: 5%;height: 65px;z-index: 100;cursor: pointer;left: 70.6%;"
                   href="http://www.taobao.com/go/market/webww/ww.php?ver=3&touid=杭州女装网%3A在线主管&siteid=cntaobao&status=2&charset=utf-8" target="_blank"></a>
            </div>
            <div class="wow" style="position: relative;" id="bg_1">
                <img src="http://img.hznzcn.com/TanMaoG/BG_1.png" style="width: 100%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_1_t.gif" style="display: inline-block; position: absolute; top: 56.2%; left: 44.5%; z-index: 2; width: 1%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_1_t_2.gif" style="display: inline-block; position: absolute; top: 57.1%; left: 52.37%; z-index: 2; width: 0.72%;" />
                <img src="http://img.hznzcn.com/TanMaoG/TM_E_L.png" class="wow bounceInLeft" data-wow-duration="3s" style="display: inline-block; position: absolute; top: 2%; left: 38%; z-index: 2; width: 3%;" />
                <img src="http://img.hznzcn.com/TanMaoG/TM_E_R.png" class="wow bounceInRight" data-wow-duration="3s" style="display: inline-block; position: absolute; top: 2%; left: 56%; z-index: 2; width: 3%;" />
                <img src="http://img.hznzcn.com/TanMaoG/TM.png" class="wow lightSpeedIn" data-wow-duration="2s" style="display: inline-block; position: absolute; top: 10%; left: 35%; z-index: 2; width: 14%;" />
                <img src="http://img.hznzcn.com/TanMaoG/TM_G.png" class="wow flip" data-wow-duration="2s" data-wow-delay="500ms" style="display: inline-block; position: absolute; top: 10%; left: 49%; z-index: 2; width: 7%" />
                <img src="http://img.hznzcn.com/TanMaoG/TM_H.png" class="wow bounceIn " data-wow-duration="7s" data-wow-delay="1s" style="display: inline-block; position: absolute; top: 10%; left: 56%; z-index: 2; width: 7%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_1_T.png" style="display: inline-block; position: absolute; top: 37%; left: 39.8%; z-index: 3; width: 18%;" />
            </div>
            <div class="wow fadeInDown" id="bg_2" one="1" style="position: relative; top: -5px;">
                <img src="http://img.hznzcn.com/TanMaoG/BG_2.png" style="width: 100%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_2_T.png" style="display: inline-block; position: absolute; top: 10%; left: 35%; z-index: 3; width: 28%;" />
            </div>
            <div class="wow fadeInDown" id="bg_3" style="position: relative; top: -10px;">
                <img src="http://img.hznzcn.com/TanMaoG/BG_3.png" style="width: 100%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_3_T.png" class="wow flipInX" data-wow-duration="5s" style="display: inline-block; position: absolute; top: 10%; left: 36%; z-index: 3; width: 28%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_3_B.png" class="wow lightSpeedIn" data-wow-delay="600ms" data-wow-duration="2s" style="display: inline-block; position: absolute; top: 75%; left: 27%; z-index: 3; width: 48%;" />
            </div>
            <div class="wow fadeInDown" id="bg_4" style="position: relative; top: -15px;">
                <img src="http://img.hznzcn.com/TanMaoG/BG_4.png" style="width: 100%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_4_T.png" class="wow rotateIn" data-wow-duration="2s" style="display: inline-block; position: absolute; top: 10%; left: 36%; z-index: 3; width: 28%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_4_L.png" class="wow bounceInLeft" data-wow-duration="3s" style="display: inline-block; position: absolute; top: 2%; z-index: 2; width: 40%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_4_R.png" class="wow bounceInRight" data-wow-duration="3s" style="display: inline-block; position: absolute; top: 2%; left: 60%; z-index: 2; width: 40%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_4_0.png" class="wow bounceInDown" data-wow-duration="3s" style="display: inline-block; position: absolute; top: 52%; left: 40%; z-index: 2; width: 3%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_4_0.png" class="wow bounceInDown" data-wow-duration="3s" style="display: inline-block; position: absolute; top: 52%; left: 58.3%; z-index: 2; width: 3%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_4_1.png" class="wow bounceInUp" data-wow-duration="3s" style="display: inline-block; position: absolute; top: 45%; left: 32.5%; z-index: 2; width: 7%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_4_2.png" class="wow bounceInUp" data-wow-duration="3s" style="display: inline-block; position: absolute; top: 43%; left: 43.3%; z-index: 2; width: 15%;" />
                <img src="http://img.hznzcn.com/TanMaoG/BG_4_3.png" class="wow bounceInUp" data-wow-duration="3s" style="display: inline-block; position: absolute; top: 49%; left: 61.8%; z-index: 2; width: 7%;" />
            </div>
        </div>

    </div>
   <script src="dist/wow.js"></script>
    <script>
        var w = new WOW({
            times: false,
            animateClass: 'animated',
            offset: 100,
            callback: function (box) {
                !!box.id && console.log(box.id);
                if (box.id == "bg_2" && box.getAttribute("one")==1) {
                    box.setAttribute("one", 0);
                  var d=  document.querySelectorAll("#" + box.id + " img[del]");
                    console.log(d);

                    var j = 8;
                    var x = [];
                    var y = [];
                    while (j-- > 0) {
                        x.push(Math.floor(Math.random() * 13 + 55));
                        y.push(Math.floor(Math.random() * 35 + 47));
                    }
                    while (j++ < 2) {
                        x.push(Math.floor(Math.random() * 15 + 25));
                        y.push(Math.floor(Math.random() * 25 + 15));
                    }
                    while (j-- > 1) {
                        x.push(Math.floor(Math.random() * 11 + 44));
                        y.push(Math.floor(Math.random() * 35 + 30));
                    }
                    x.push(Math.floor(Math.random() * 12 + 58));
                    y.push(Math.floor(Math.random() * 10 + 10));
                    x.push(Math.floor(Math.random() * 7 + 32));
                    y.push(Math.floor(Math.random() * 15 + 60));
                    x.push(Math.floor(Math.random() * 12 + 58));
                    y.push(Math.floor(Math.random() * 10 + 10));
                    x.push(Math.floor(Math.random() * 7 + 32));
                    y.push(Math.floor(Math.random() * 15 + 60));
                    var i = 0;
                    var f = setInterval(function (parameters) {
                        i++;
                        var img = document.createElement('img');
                        img.src = "http://img.hznzcn.com/TanMaoG/" + (i % 15 + 1) + ".png";
                        var width = Math.floor(Math.random() * (i < 10 ? 3 : 4) + 3);
                        img.style.display = "inline-block";
                        img.style.position = "absolute";
                        img.style.top = y[i - 1] + "%";
                        img.style.left = x[i - 1] + "%";
                        img.style.zIndex = 3;
                        img.style.width = width + "%";
                        //  img.style = "display: inline-block; position: absolute; top: " + y[i - 1] + "%;left: " + x[i - 1] + "%;z-index: 3; width: " + width + "%;";
                        img.className = 'wow bounce';
                        box.appendChild(img);
                        if (i >= x.length)
                            clearInterval(f);
                    }, 200);

                }
            }
        });
        w.init();
    </script>
</body>
</html>
